<template>
    <div class="container">
        <div>
            <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
                <span style="margin-right: 20px; font-weight: bold;">闭环管理</span>
                <span style="margin-right: 20px;">|</span>
                <span style="display: flex; align-items: center;">
                    <span>{{ $route.query.title }}</span>
                </span>
                <span style="margin:0 20px;">|</span>
                <span style="display: flex; align-items: center;">
                    <span style="font-size: 14px;">回执详细</span>
                </span>
            </div>

        </div>
        <div class="selection">
            <el-select v-model="countyName" @change="getTown(countyName)" placeholder="县"
                style="width: 150px;margin: 0 5px" class="custom-select">
                <el-option v-for="item in countyOptions" :key="item.value" :label="item.value" :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="townName" placeholder="镇" style="width: 100px;margin: 0 5px" v-if="countyName !== '雅安'"
                class="custom-select" v-loading="TownLoading">
                <el-option v-for="item in townNameOptions" :key="item" :label="item" :value="item">
                </el-option>
            </el-select>
            <el-select v-model="type" placeholder="类型" style="width: 150px;margin: 0 5px" class="custom-select">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.value" :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="confirm" placeholder="确认" style="width: 100px;margin: 0 5px" class="custom-select">
                <el-option v-for="item in confirmOptions" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" @click="filterData">确定</el-button>
            <span style="color: white;font-weight: bolder;font-size: 16px;margin-left: 50px">按</span>
            <el-select v-model="selectValue" placeholder="请选择" style="width: 120px;margin: 0 5px" class="custom-select">
                <el-option label="姓名" :value=0></el-option>
                <el-option label="手机号码" :value=1></el-option>
            </el-select>
            <el-input placeholder="请输入内容" v-model="inputValue" class="custom-select"
                style="width: 300px;margin: 0 5px" />
            <el-button type="primary" @click="filterData">搜索</el-button>
            <!-- <el-button type="danger" @click="reset">重置</el-button> -->
            <el-button type="warning" @click="uploadVisible = true" class="upload" v-if="isAdmin === '1'">上传</el-button>
        </div>

        <!-- 上传弹窗 -->
        <el-dialog title="图文信息" :visible.sync="uploadVisible" width="50%" class="uploadDialog"
            v-loading="uploadLoading">
            <div class="form">
                <el-form ref="ruleForm" label-width="80px" :model="mulData" :rules="rules">
                    <el-form-item label="灾害类型:" prop="name">
                        <span>{{ mulData.type }}</span>
                    </el-form-item>
                    <div class="img">
                        <el-form-item prop="img">
                            <span>现场图片</span>
                            <!-- 图片 -->
                            <el-upload action="" :file-list="fileList" list-type="picture-card" ref="upload"
                                :on-change="handleChange" :auto-upload="false" multiple>
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                    <el-form-item label="姓名:" prop="name">
                        <el-input v-model="mulData.name" placeholder="请填写上传人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="所属县:" prop="county">
                        <el-select v-model="mulData.county" placeholder="请选择所属县" @change="getTown(mulData.county)">
                            <el-option v-for="item in countyOptions" :key="item.value" :label="item.value"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属乡镇:" prop="town" v-if="mulData.county !== '雅安'">
                        <el-select v-model="mulData.town" placeholder="请选择所属乡镇">
                            <el-option v-for="item in townNameOptions" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="具体地点:" prop="venue">
                        <el-input v-model="mulData.venue" placeholder="请填写具体地点"></el-input>
                    </el-form-item>
                    <el-form-item label="事件:" prop="desc">
                        <el-input type="textarea" :autosize="{ minRows: 5 }" v-model="mulData.desc"
                            placeholder="请描述具体事件"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="uploadVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit('ruleForm')">确定上传</el-button>
            </span>
        </el-dialog>

        <div class="table">
            <div class="table_title">
                <span style="font-size: 16px;color:white">已回执人数/需要回执人数 : {{ confirmedNum }}/{{ confirmedNum +
                    notConfirmedNum
                    }}</span>
            </div>
            <el-table stripe ref="filterTable" :data="tableData" v-loading="loading"
                :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-style="rowStyle" max-height="700px">
                <el-table-column prop="name" label="姓名" align="center">
                </el-table-column>
                <el-table-column prop="duty" label="职责" align="center">
                </el-table-column>
                <el-table-column prop="tel" label="电话号码" align="center">
                </el-table-column>
                <el-table-column prop="county" label="区域" align="center">
                </el-table-column>
                <el-table-column prop="town" label="乡镇" align="center">
                </el-table-column>
                <el-table-column prop="village" label="村" align="center">
                </el-table-column>
                <el-table-column prop="type" label="种类" align="center">
                </el-table-column>
                <el-table-column prop="sgroup" label="行业" align="center">
                </el-table-column>
                <el-table-column prop="unit" label="单位" align="center">
                </el-table-column>
                <el-table-column prop="confirmTime" label="确认时间" align="center">
                </el-table-column>
                <el-table-column prop="confirmType" label="确认方式" align="center">
                </el-table-column>
            </el-table>
        </div>
        <!-- <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="total" background
                class="custom-pagination">
            </el-pagination>
        </div> -->
        <div class="detail_table">
            <div class="table_title">
                <span style="font-size: 16px;color:white">产品详情</span>
            </div>
            <el-table stripe ref="filterTable" :data="detailTableData" style="width: 100%"
                :header-cell-style="{ color: 'white', background: '#0c2340' }">
                <el-table-column prop="productTime" label="发布时间" align="center" min-width="10%">
                </el-table-column>
                <el-table-column prop="productUnit" label="发布单位" align="center" min-width="10%">
                </el-table-column>
                <el-table-column prop="productArea" label="范围" align="center" min-width="5%">
                </el-table-column>
                <el-table-column prop="productNumber" label="期数" align="center" min-width="5%">
                </el-table-column>
                <el-table-column prop="productContent" label="内容" align="center" min-width="70%">
                </el-table-column>
            </el-table>
        </div>

        <!-- 查看弹窗 -->
        <el-dialog title="具体信息" :visible.sync="showVisible" width="50%" class="reviewDialog">
            <div class="box">
                <div class="img">
                    <span>现场图片</span>
                    <!-- 图片 -->
                    <div>
                        <el-image style="width: 100px; height: 100px" :src="img" :preview-src-list="reviewPupop.urls"
                            v-for="img in reviewPupop.urls" :key="img">
                        </el-image>
                    </div>

                </div>
                <div class="info">
                    <div>
                        <span>上传时间:</span>
                        <span>{{ reviewPupop.uploadTime }}</span>
                    </div>
                    <div>
                        <span>灾害类型:</span>
                        <span>{{ reviewPupop.type }}</span>
                    </div>
                    <div>
                        <span>上传人姓名:</span>
                        <span>{{ reviewPupop.name }}</span>
                    </div>
                    <div>
                        <span>上传人所属县:</span>
                        <span>{{ reviewPupop.county }}</span>
                    </div>
                    <div>
                        <span>上传人所属乡镇:</span>
                        <span>{{ reviewPupop.town }}</span>
                    </div>
                    <div>
                        <span>具体地点:</span>
                        <span>{{ reviewPupop.venue }}</span>
                    </div>
                    <div>
                        <span>具体事件:</span>
                        <span>{{ reviewPupop.descs }}</span>
                    </div>
                </div>

            </div>

        </el-dialog>
        <!-- 具体举措 -->

        <div class="specificMeasure_table">
            <div class="table_title">
                <span style="font-size: 16px;color:white">具体举措</span>
            </div>
            <el-table stripe ref="filterTable" :data="concreteMeasureTableData" style="width: 100%"
                :header-cell-style="{ color: 'white', background: '#0c2340' }" @cell-mouse-enter="getProduct">
                <el-table-column prop="uploadTime" label="上传时间" align="center" width="200px" max-height="750px">
                </el-table-column>
                <el-table-column prop="type" label="灾害类型" align="center">
                </el-table-column>
                <el-table-column prop="name" label="上传人姓名" align="center">
                </el-table-column>
                <el-table-column prop="county" label="上传人所属县" align="center">
                </el-table-column>
                <el-table-column prop="town" label="上传人所属乡镇" align="center">
                </el-table-column>
                <el-table-column prop="venue" label="具体地点" align="center">
                </el-table-column>
                <el-table-column prop="url" label="现场图片" align="center">
                    <!-- 图片的显示 -->
                    <template slot-scope="scope">
                        <img :src="scope.row.urls[0]" min-width="70" height="70" />
                        <span>. . .</span>
                    </template>
                </el-table-column>
                <el-table-column prop="descs" label="上传事件" align="center" width="250px">
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 1">通过</span>
                        <span v-if="scope.row.status === 2" style="color: red;">不通过</span>
                        <span v-if="scope.row.status === 0">待审核</span>
                    </template>
                </el-table-column>
                <el-table-column label="查看" align="center">
                    <el-button type="primary" @click="showVisible = true">查看</el-button>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>


<script>
import Cookies from "js-cookie";
import { reqReceiptDetail, reqImageAndTextReview, reqTown } from "@/api/closed_loop/index.js";

import { mulFile } from "@/api/closed_loop/index.js";
export default {
    name: "detail",
    data() {
        const check = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('该项不能为空！！'));
            }
            else {
                callback();
            }
        };
        return {
            isAdmin: Cookies.get('isAdmin'),
            //查看弹窗
            showVisible: false,
            reviewPupop: [],
            // 上传弹窗
            uploadVisible: false,
            // 上传表单
            mulData: {
                type: this.$route.query.type,
                name: '',
                county: '',
                town: '',
                desc: '',
                venue: '',
                fileList: []
            },
            // 表单校验
            rules: {
                img: [
                    { validator: check, trigger: 'blur' }
                ],
                name: [
                    { validator: check, trigger: 'blur' }
                ],
                county: [
                    { validator: check, trigger: 'blur' }
                ],
                town: [
                    { validator: check, trigger: 'blur' }
                ],
                venue: [
                    { validator: check, trigger: 'blur' }
                ],
                desc: [
                    { validator: check, trigger: 'blur' }
                ]
            },
            fileList: [],
            currentPage: 1,
            pageSize: 10,
            total: 57,
            // 灾害
            disaster: this.$route.query.type,
            //产品id
            productId: this.$route.query.productId,
            // 产品详细
            detailTableData: [
                {
                    // 发布时间
                    productTime: this.$route.query.productTime,
                    // 发布单位
                    productUnit: this.$route.query.productUnit,
                    // 范围
                    productArea: this.$route.query.productArea,
                    // 期数
                    productNumber: this.$route.query.productNumber,
                    // 内容
                    productContent: this.$route.query.productContent,
                }
            ],
            // 县
            countyName: Cookies.get('county'),
            // 地区选项
            countyOptions: Cookies.get('county') === '雅安' ? [
                {
                    value: '雅安',
                },
                {
                    value: '雨城'
                },
                {
                    value: '经开'
                },
                {
                    value: '名山'
                },
                {
                    value: '天全'
                },
                {
                    value: '芦山'
                },
                {
                    value: '宝兴'
                },
                {
                    value: '荥经'
                },
                {
                    value: '汉源'
                }, {
                    value: '石棉'
                },] : [{ value: Cookies.get('county') }],
            // 镇
            townName: Cookies.get('county'),
            townNameOptions: [

            ],
            // 类型
            type: '全部',
            // 类型选项
            typeOptions: [
                {
                    value: '全部'
                },
                {
                    value: '地质灾害'
                },
                {
                    value: '在建工程'
                }, {
                    value: '非煤矿山'
                }, {
                    value: '工业企业'
                }, {
                    value: '旅游景点'
                }, {
                    value: '交通沿线'
                }, {
                    value: '自然资源'
                }, {
                    value: '地灾隐患点'
                },
                {
                    value: '其他'
                },
            ],
            //确认
            confirm: 2,
            confirmOptions: [
                {
                    name: '全部',
                    value: 2
                },
                {
                    name: '已回执',
                    value: 1
                },
                {
                    name: '未回执',
                    value: 0
                },
            ],
            // 筛选条件
            selectValue: 0,
            //筛选内容
            inputValue: '',
            //表格数据
            tableData: [],
            //确认回执人数
            confirmedNum: '',
            //没有回执人数
            notConfirmedNum: '',
            //加载标志
            loading: false,
            TownLoading: false,
            // 上传的加载标志
            uploadLoading: false,
            // 具体措施表格
            concreteMeasureTableData: []


        }
    },
    mounted() {
        this.getTown(this.countyName)
        this.getReceiptDetail()
        this.getConcreteMeasure()


    },
    methods: {
        handleChange(file, fileList) {
            this.mulData.fileList = fileList
        },
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.mulData.fileList.length === 0) {
                        this.$message.error('请上传图片')
                    }
                    else {
                        let formData = new FormData()
                        // 如需添加其他参数，增加下面的代码即可

                        formData.append("productId", this.productId)
                        formData.append("type", this.mulData.type)
                        formData.append("name", this.mulData.name)
                        formData.append("county", this.mulData.county)
                        formData.append("town", this.mulData.town)
                        formData.append("venue", this.mulData.venue)
                        formData.append("desc", this.mulData.desc)
                        // 使用这种方式添加文件
                        this.mulData.fileList.forEach((file) => {
                            formData.append('files', file.raw)
                            console.log(file.raw)
                        })
                        this.uploadLoading = true

                        mulFile(formData, Cookies.get("token")).then(res => {
                            if (res.data.code === 200) {
                                this.$message.success('上传成功！')
                                this.uploadVisible = false
                                this.mulData = {
                                    productId: '',
                                    name: '',
                                    county: '',
                                    town: '',
                                    desc: '',
                                    venue: '',
                                    fileList: []
                                }
                                this.$refs.upload.clearFiles();
                                this.uploadLoading = false
                                // 重新获取具体措施
                                this.getConcreteMeasure()
                            }
                            else {
                                this.$message.error(res.data.msg)
                                this.uploadLoading = false
                            }
                        }).catch(err => {
                            this.$message.error(err)

                        })
                    }
                }
            });





        },
        handleChange(file, fileList) {
            // this.mulData.fileList.push(file.raw)
            this.mulData.fileList = fileList
            console.log("文件数：", this.mulData.fileList.length)
        },

        // 表格样式
        headerCellStyle() {
            return {
                background: '#0c2340',
                color: '#fff',
            };
        },

        cellStyle() {
            return {
                background: '#05152e',
                color: '#fff',
            };
        },
        rowStyle() {
            return {
                height: '30px',
            };
        },
        //  获取回执详细
        async getReceiptDetail() {
            this.loading = true
            const result = await
                reqReceiptDetail(this.productId, this.disaster, this.countyName, this.townName, this.type, this.confirm, this.selectValue, this.inputValue)
            if (result.data.code === 200) {
                this.loading = false
                this.tableData = result.data.data.List
                this.confirmedNum = result.data.data.confirmedNum
                this.notConfirmedNum = result.data.data.notConfirmedNum
            }
            else {
                this.loading = false
                this.$message.error(result.data.msg)
            }

        },
        // 获取具体措施
        async getConcreteMeasure() {
            let res = await reqImageAndTextReview(this.productId)
            this.concreteMeasureTableData = [...res.data.data.pass, ...res.data.data.notPass, ...res.data.data.unreviewed]
            console.log('this.concreteMeasureTableData', this.concreteMeasureTableData)

        },
        // 具体某行审核信息
        getProduct(product) {
            this.reviewPupop = product
        },
        // 获取镇
        async getTown(countyName) {
            console.log(111)
            this.TownLoading = true
            this.mulData.town = ''
            this.townName = ''
            const result = await reqTown(countyName)
            this.townNameOptions = result.data.data
            console.log(this.townNameOptions)
            this.TownLoading = false
        },
        // 筛选数据
        filterData() {
            this.getReceiptDetail()
        },
        //重置条件
        reset() {
            this.countyName = localStorage.getItem('county')
            this.townName = ''
            this.type = '全部'
            this.confirm = 2
            this.selectValue = 0
            this.inputValue = ''
            this.getReceiptDetail()
        }
    }
}
</script>


<style scoped lang="scss">
.custom-select .el-input__inner,
.el-date-picker .el-input__inner {
    background-color: rgb(36, 54, 101) !important;
    color: white !important;
    font-weight: bold !important;
    border: 2px solid #fff !important;
}

::v-deep .el-table__body-wrapper {

    // 整个滚动条
    &::-webkit-scrollbar {
        width: 10px; // 纵向滚动条的宽度
        background: rgba(213, 215, 220, 0.3);

    }

    // 滚动条轨道
    &::-webkit-scrollbar-track {
        border: 5px solid white;
    }


}

// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #0c2340;
    border-radius: 2px;
}

// --------------------隐藏table gutter列和内容区右侧的空白 start
::v-deep .el-table th.gutter {
    display: none;
    width: 0
}

::v-deep .el-table colgroup col[name='gutter'] {
    display: none;
    width: 0;
}

// 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {
    width: 100% !important;
}

// --------------------隐藏table gutter列和内容区右侧的空白 end把以上改成css

.container {
    width: 100%;



    .selection {
        width: 100%;
        position: relative;

        .upload {
            position: absolute;
            right: 0;
        }


    }

    .uploadDialog {

        .box {
            display: flex;

            .img {
                span {
                    width: 100%;
                    height: 50px;
                    font-size: 18px;
                    display: block;


                }

                width: 100%;
            }

            .form {
                width: 50%;
            }




        }
    }

    .table {
        width: 100%;

        .table_title {
            width: 100%;
            display: grid;
            place-items: center;
            margin: 20px 0;

        }

    }

    .reviewDialog {
        .box {
            display: flex;

            .img {
                span {
                    width: 100%;
                    height: 10%;
                    display: block;
                    font-size: 18px;
                }

                width: 50%;

                div {
                    width: 100%;
                    height: 90%;
                }
            }

            .info {
                width: 50%;

                div {
                    width: 100%;
                    margin: 40px 0;

                    span:first-child {
                        margin-right: 20px;
                        font-size: 18px;
                        color: black;
                    }

                    span:last-child {
                        font-size: 17px;
                        color: gray;
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    .detail_table {
        .table_title {
            width: 100%;
            display: grid;
            place-items: center;
            margin: 20px 0;

        }
    }

    .specificMeasure_table {



        .table_title {
            width: 100%;
            display: grid;
            place-items: center;
            margin: 20px 0;

        }
    }



    .pagination {
        width: 100%;
        margin: 10px 0;
    }

}
</style>